<!--
import { setTimeout } from 'timers';
 * @Author: LiZn
 * @Date: 2021-08-20 04:10:18
 * @LastEditTime: 2021-08-22 09:13:59
 * @LastEditors: LiZn
 * @Description: news列表
 * @FilePath: \todaynews\src\components\newslist.vue
-->
<template>
  <div id="news">
    <el-skeleton style="width:100%;" :loading="loading" animated  :throttle="500">
        <template slot="template" >
          <el-skeleton-item variant="text" style="height:0.4rem;"/>
          <div>
            <el-skeleton-item class="elimg" variant="image"/>
            <el-skeleton-item class="elimg" variant="image"/>
            <el-skeleton-item class="elimg" variant="image"/>
          </div>
          <div>
            <el-skeleton-item variant="p"/>
          </div>
        </template>
    </el-skeleton>

    <router-link class="newswarp" :to='{path:`/content/${name}/cont`}' v-for="item in newsData" :key="item.id">
      <div class="newslist">
        <span class="newstitle">{{item.title}}</span>
        <div class="imgs">
            <span v-for="(img,index) in item.imgsrc" :key="index+'-only'">
              <img :src="img"/>
            </span>
        </div>
        <div class="infos">
            <span class="user">陈翔六个蛋</span>
            <span class="ping">评论 22</span>
        </div>
      </div>
    </router-link>


  </div>
</template>

<script>

  export default {
    props:{
      news:{
        type:Array,
        required:true
      },
    },
    data(){
      return {
        name:'lizn',
        newsData:'',
        loading:true
      }
    },
    mounted(){
      console.log(this.$router)
      setTimeout(()=>{
          this.newsData = this.news;
          this.loading = false;
      },1000)
    }
  }

</script>
<style scoped>
  #news{
    display:flex;
    flex-direction: column;
    margin:0 .2rem;
  }
  .elimg{
    width:33%;
    height:2rem;
    display:inline-flex;
    align-items: center;
    margin-bottom:0.1rem;
  }
  .newswarp{
    display: inline-block;
    box-sizing: border-box;
    padding:.2rem 0;
    padding-bottom: 0.1rem;

    border-bottom:1px solid #ccc
  }
  .newslist{
    text-align:left
  }
  .newstitle{
    font-size:0.4rem;
  }
  .imgs{
    width:100%;
  }
  .imgs img{
    width:33%;
    height:2rem
  }
  .infos{
    font-size:0.25rem
  }
  .infos span{
    padding-right:0.1rem
  }
</style>